<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器</title>

    <style>

          /* 并集选择器 或 公用样式,避免重复书写*/
          h1,h2,.a{
            color: aqua;
        }

        /* 标签选择器 tag*/
        h1{

            font-size: 50px;
            color: brown;
        }
       
       
        /* id选择器,#id值 */
        #box1{
            background: linear-gradient(to right, #ff7e5f, #feb47b);
        }
        /* 类选择器, .类名 */
        .a{
            color: rgb(193, 84, 140);
            font-size: large;
        }
        .b{

            color: #ff7e5f;
        }

       
        /* 交集选择 且  做筛选条件,没必要id*/

        h2.a{
            color: cornflowerblue;
        }
        


        /* 后代选择器 */
        /* .father .grandson{
            color: #ff7e5f;
        } */
        
        #box1 .a{
            color: chocolate;
        }
        /* 子代选择器 */
        .father > .grandson{
            color: #ff7e5f;
        }
        /* 属性选择器 选择器[属性='???']*/

        div[class='father']{
            
        }

        /* 伪类选择器 */
        a:link{
            /* 访问前 */
            font-size: 30px;
            color: #ac5fff;
        }
        a:visited{
            /* 访问后 */
            font-size: 30px;
            color: #ff7e5f;
        }
        a:hover{
            /* 覆盖 */
            font-size: 25px;
            color: rgb(66, 194, 104);
        }
        a:active{
            /* 覆盖 */
            font-size: 25px;
            color: rgb(203, 169, 47);
        }

        input:focus{
            color: #ac5fff;
        }



    </style>
</head>
<body>

    <a href="http://www.7k7k.com"> 百度</a>

    <div class="father">

        <div class="grandson">

            后代(儿子)
        </div>

        父代

        <div id="son">

            子代

            <div class="grandson">

                后代(孙子)
            </div>
        </div>
    </div>

    <h1>一段紧张的对话</h1>
    <h2  class="a">第二段</h2>
    <div id="box1">

        <p class ="a">A:在吗</p>
        <p class="b">B:在</p>
        <p class="a">A:在干嘛</p>
        <p>B:呼吸</p>
        <p class="a">A:来张照片看看</p>
        <p >B:没有</p>
        <p class="a">A:现拍一张,要素颜的</p>
    
    </div>
   
    <h1>一段紧张的对话</h1>
    <h2>dierduan</h2>
    <p class="a">A:在吗</p>
    <p>B:在</p>
    <p class="a">A:在干嘛</p>
    <p>B:呼吸</p>
    <p class="a">A:来张照片看看</p>
    <p>B:没有</p>
    <p class="a">A:现拍一张,要素颜的</p>


    <!-- 样式层递遵循
     
    后来者居上,如果同时加载,那么就根据css中顺序后来者居上
    -->
    <div class="a">
        评价

        <p class="b">1234567890</p>
        
        <input class="b" type="text">

    </div>
    
</body>
</html>